<template>
	<view id="app">
		<view v-if="isTypeClass">
			<view v-for="clas,index in listData" :key='index'>
				<view class="title">
					<u-cell-group>
						<u-cell-item :title="clas.type" value="查看更多" @click='clickmore(clas)'></u-cell-item>
					</u-cell-group>
				</view>
				<view class=" box" v-for="item,itemIndex in clas.data" :key='itemIndex'
					style="height: auto;display: -webkit-inline-box;">
					<view @click="theCurrent(item)">
						<view>
							<u-image width="100%" height="100%" :src="item.pic">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="dats_msg">
								<view class="box_data">
									<u-icon color='#FFF' label-color='#FFF' name="play-right-fill"
										:label='item.play | unitConverter'></u-icon>
								</view>
								<view class="box_data">
									<u-icon color='#FFF' label-color='#FFF' name="more-circle"
										:label='item.video_review | unitConverter' width='20'></u-icon>
								</view>
							</view>
						</view>
						<view>
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!isTypeClass">
			<view class="box" v-for="item,index in listData" :key='index' @click="theCurrent(item)">
				<view class="img_box">
					<u-image width="100%" height="100%" :src="item.pic">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="dats_msg">
						<view class="box_data">
							<u-icon color='#FFF' label-color='#FFF' name="play-right-fill"
								:label='item.stat && item.stat.view | unitConverter'></u-icon>
						</view>
						<view class="box_data">
							<u-icon color='#FFF' label-color='#FFF' name="more-circle"
								:label='item.stat.danmaku | unitConverter' width='20'></u-icon>
						</view>
					</view>
				</view>
				<view class="titlemsg">
					{{item.title}}
				</view>
			</view>
		</view>

		<!-- <view class="box">
				<view>
					<img :src='pic'>
					<u-row gutter="16" justify="center">
						<u-col span="6">
							<u-icon name="play-right-fill"></u-icon>{{title}}
						</u-col>
						<u-col span="6">
							<u-icon name="more-circle"></u-icon>{{barrage}}
						</u-col>
					</u-row>
				</view>
				<view>
					<view class="msgtxt">
						{{item}}
					</view>
				</view>
			</view> -->

		<!-- <text>滑动页面，返回顶部按钮将出现在右下角</text>
					<u-back-top :scroll-top="scrollTop"></u-back-top> -->

	</view>
</template>

<script>
	export default {
		name: 'bililistLine',
		data() {
			return {
				list: [],
			}
		},
		props: {
			isTypeClass: '',
			listData: '',
			// pic:'', // 视频封面
			// title:'', // 标题
			// plays:'',// 播放次数
			// barrage:'', //弹幕次数

		},
		watch: {
			listData(newVal, val) {
				// console.log(newVal);
			}
		},
		methods: {
			theCurrent(data) {
				this.$emit('theCurrent', data)
			},
			error(err) {
				// console.log(123,err);
			},
			clickmore(data) {
				this.$emit('mores', data)
			},
		}
	}
</script>

<style scoped lang="less">
	.contentBox {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.box {
		// display: flex;
		display: inline-block;
		// flex-wrap: wrap;
		box-sizing: border-box;
		box-shadow: 25px 25px 49px #f9f9f9;
		width: 48%;
		height: 350rpx;
		border-bottom: 2px solid #f9f9f9;
		border-radius: 10rpx;
		margin: 1%;
		background: #FFF;

		.img_box {
			width: 100%;
			height: 70%;
		}

		.dats_msg {
			display: flex;
			position: relative;
			bottom: 40rpx;

			.box_data {
				width: 50%;
			}
		}

		.titlemsg {
			width: 100%;
			// min-height: auto;
			height: 30%;
			font-size: 28rpx;
			font-weight: 900;
			line-height: 48rpx;
			// display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;

			view {
				// width: 50%;
				height: 50rpx;
			}
		}

		.txt {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 30rpx;
			color: rgb(141, 141, 141);
		}

		/deep/ .u-image__image {
			height: 100%;
		}

		/deep/ .u-iconfont {
			width: 20rpx;
		}
	}

	.u-row {
		color: #FFF;
		position: relative;
		bottom: 30%;
	}
</style>
